<route lang="yaml">
	meta:
	enabled: false
</route>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import Sortable from 'sortablejs'
	import dayjs from 'dayjs'
	import useUserStore from '@/store/modules/user'
	import productApi from '@/api/zhitan/product.ts'
	import GetSchedule from './getschedule.vue'

	// import type Edit from './edit.vue'
	// import Getuser from './getuser.vue'
	// import Handover from './handover.vue'

	// import systemApi from '@/api/modules/system/systemApi'
	const router = useRouter()
	const formProduct : any = ref({
		route_ids: [],

	})
	const storesList : any = ref([{
		id: 1, name: '门店1',
	}, {
		id: 2, name: '门店2',
	}, {
		id: 3, name: '门店3',
	}])
	const userStore : any = useUserStore()
	const changeleftindex : any = ref(0)
	const itemleftdata : any = ref({})
	const activeName : any = ref('first')

	const showEdit = ref(false)
	const giftForm : any = ref({})
	const shopForm : any = ref({})
	const openGift = ref(false)
	const addopenGift = ref(false)
	const showSchedule = ref(false)


	const infoform : any = ref({})
	const activeleft : any = ref([0, 0])

	const formText : any = ref({
		image: '',
		name: '',
		is_identity: '',
		status: '',
	})
	const toptabactive = ref(1)
	const topTabsData : any = ref([
		{ id: 1, name: '分类', count: 0 },
		// { id: 2, name: '景点', count: 0 },
		// { id: 3, name: '产品', count: 0 },
		// { id: 4, name: '供应商价格', count: 46 },

	])
	const ischangestatus : any = ref(false)
	const goodlists : any = ref([])
	const righttitle : any = ref('全部分类')
	const rightnum = ref(0)
	const allgiftList : any = ref([])
	const giftList : any = ref([])

	const leftData : any = ref([
		{
			id: 1,
			name: '全部分类',
			type: 'line',
			children: [],
		},
	])

	const loadingRef : any = ref(null)
	const form : any = ref({
		sex: 1,
		scenic_ids: [],
	})
	const total : any = ref(0)
	const paging : any = ref({
		page: 1,
		limit: 10,
		status: '1,2,3'
	})
	const formRef = ref<FormInstance>()
	const formRules = ref({
		name: [{
			required: true,
			message: '请输入景点名称',
			trigger: 'blur',
		}],
		star_level: [{
			required: true,
			message: '请选择星级',
			trigger: 'blur',
		}],
		scenic_ids: [{
			required: true,
			message: '请添加景点',
			trigger: 'blur',
		}],
		code: [{
			required: true,
			message: '请添加线路编号',
			trigger: 'blur',
		}],
		address: [{
			required: true,
			message: '请输入地址',
			trigger: 'blur',
		}],
		phone: [{
			required: true,
			pattern: /^1[3456789]\d{9}$/,
			message: '请输入正确的手机号码',
			trigger: 'blur',
		}],
		role: [{
			required: true,
			message: '请选择角色',
			trigger: 'blur',
		}],
		price: [{
			required: true,
			message: '请添加销售价格',
			trigger: 'blur',
		}],
		cost_price: [{
			required: true,
			message: '请添加成本价格',
			trigger: 'blur',
		}],
		adult_price: [{
			required: true,
			message: '请添加销售价格',
			trigger: 'blur',
		}],
		adult_cost_price: [{
			required: true,
			message: '请添加成本价格',
			trigger: 'blur',
		}],
		old_price: [{
			required: true,
			message: '请添加销售价格',
			trigger: 'blur',
		}],
		old_cost_price: [{
			required: true,
			message: '请添加成本价格',
			trigger: 'blur',
		}],
		child_price: [{
			required: true,
			message: '请添加销售价格',
			trigger: 'blur',
		}],
		child_cost_price: [{
			required: true,
			message: '请添加成本价格',
			trigger: 'blur',
		}],
		route_ids: [{
			required: true,
			message: '请添加关联线路',
			trigger: 'blur',
		}],

		gift_id: [{
			required: true,
			message: '请选择赠品',
			trigger: 'blur',
		}],
		num: [{
			required: true,
			message: '请添加赠品数量',
			trigger: 'blur',
		}],

	})
	onMounted(() => {
		getcateList()// 请求分类数据
		if (localStorage.getItem('alldart')) {
			const obj : any = ref(localStorage.getItem('alldart'))
			console.log(obj.value, 'objobj')
			obj.value = JSON.parse(obj.value)
			activeName.value = obj.value.activename
			activeleft.value = obj.value.activeleft
			changeleftindex.value = obj.value.changeleftindex
			righttitle.value = obj.value.righttitle
			rightnum.value = obj.value.rightnum
			paging.value.name = obj.value.name
			paging.value.goods_group_id = obj.value.goods_group_id
			itemleftdata.value = obj.value.itemleftdata
			getShopList()
		}

	})
	function getcateList() {
		productApi.ProductGroup_list({ page: 1, limit: 1000, status: 1, order: 'sort asc' }).then((res : any) => {
			const allnum : any = ref(0)
			res.data.forEach((i : any) => {
				allnum.value += i.num
			})
			leftData.value[0].children = [
				{
					name: '全部分类',
					id: null,
					num: allnum.value,
				}, ...res.data,
			]
			if (!localStorage.getItem('alldart')) {
				rightnum.value = leftData.value[0].children[0].num
				paging.value.goods_group_id = leftData.value[0].children[0].id
				getShopList()
			} else {
				setTimeout(() => {
					localStorage.removeItem('alldart')
				}, 500)
			}

		})
	}

	function getAllGiftList() {
		// productApi.gift_list({ page: 1, limit: 100 }).then((res : any) => {
		// 	if (res.code === 0) {
		// 		res.data.forEach((item : any) => {
		// 			item.code = `ZP${item.id.toString().padStart(4, '0')}`;

		// 		})
		// 		allgiftList.value = res.data
		// 	}
		// })
	}
	function getGiftList(row : any) {
		// productApi.goodsGift_list({ page: 1, limit: 100, goods_id: row }).then((res : any) => {
		// 	if (res.code === 0) {
		// 		res.data.forEach((item : any) => {
		// 			item.code = `ZP${item.id.toString().padStart(4, '0')}`;

		// 		})
		// 		giftList.value = res.data
		// 		console.log(giftList.value,'giftList.value')
		// 	}
		// })
	}
	function schedule(row : any) {
		infoform.value = row
		showSchedule.value = true
	}

	function getShopList() {
		loadingRef.value.open(1000)
		if (activeName.value === 'first') {
			if (paging.value.statuser) {
				if (paging.value.statuser === '0') {
					paging.value.status = '1,2,3'
				} else {
					paging.value.status = paging.value.statuser
				}
			} else {
				paging.value.status = '1,2,3'
			}
		} else {
			paging.value.status = '4'
		}
		productApi.Product_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				res.data.forEach((item : any) => {
					item.code = `SP${item.id.toString().padStart(4, '0')}`;
					// if (item.labels) {
					// 	item.labels = item.labels.split(',')
					// }
				})
				goodlists.value = res.data
				total.value = res.count
			}

		})
	}


	function modifyText(val : any, type : any) {
		// firstchildren.value = []
		// if (!val.id) {
		//   formText.value = {}
		// }
		// else {
		//   formText.value = JSON.parse(JSON.stringify(val))
		// }
		router.push({
			name: 'shopmanargeadd',
			query: {
				parentId: val.id,
				type: type
			},
		})
		localStorage.setItem('alldart', JSON.stringify({
			activename: activeName.value,
			activeleft: activeleft.value,
			changeleftindex: changeleftindex.value,
			righttitle: righttitle.value,
			rightnum: rightnum.value,
			name: paging.value.name,
			goods_group_id: paging.value.goods_group_id,
			itemleftdata: itemleftdata.value,
		}));
		// showEdit.value = true
	}

	function changeIstop(row : any) {
		if (!userStore.permissions.includes('shopmanargeedit')) {
			ElMessage({
				type: 'info',
				message: '您没有修改权限！',
			})
			return
		}
		ElMessageBox.confirm(
			`修改${row.is_top === 1 ? '当前产品为普通产品？' : '当前产品为热门产品？'}`,
			'提示',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			},
		)
			.then(() => {
				productApi.Product_edit({
					id: row.id,
					is_top: row.is_top === 1 ? 0 : 1,
				}).then((res : any) => {
					if (res.code === 0) {
						getShopList()
						ElMessage({
							type: 'success',
							message: '修改成功',
						})
					}

				})
			})
			.catch(() => { })
	}
	function updataDataActwo(row : any) {
		console.log(row, 'rowrow')
		if (!ischangestatus.value) {
			setTimeout(() => {
				ischangestatus.value = true
			}, 100)
			return
		}
		ElMessageBox.confirm(
			`确认${row.status === 2 ? '下架当前产品？' : '上架当前产品？'}`,
			'提示',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			},
		)
			.then(() => {
				productApi.Product_edit({
					id: row.id,
					status: row.status,
				}).then((res : any) => {
					if (res.code === 0) {
						getShopList()
						ElMessage({
							type: 'success',
							message: '修改成功',
						})
					}

				})
			})
			.catch(() => {
				// getList()
				row.status = row.status === 1 ? 2 : 1
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}

	function removeBatch(row : any) {
		productApi.Product_delete({ id: row.id }).then(() => {
			ElMessage({
				type: 'success',
				message: '操作成功',
			})
			getcateList()
			getShopList()
		})
	}
	function changeStatus(row : any, type : any) {
		const now = new Date();
		const fullTimestamp : any = Math.floor(now.getTime() / 1000)
		console.log(fullTimestamp, 'fullTimestamp')
		const obj : any = ref({})
		if (type === 1) {
			obj.value = {
				id: row.id,
				status: type,
				end_putaway_time: fullTimestamp
			}
		} else {
			obj.value = {
				id: row.id,
				status: type,
				end_recycle_time: fullTimestamp,
			}
		}
		ElMessageBox.confirm(
			`确认${type === 1 ? '上架当前产品？' : '下架当前产品？'}`,
			'提示',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			},
		)
			.then(() => {
				productApi.Product_edit(obj.value).then(() => {
					ElMessage({
						type: 'success',
						message: '操作成功',
					})
					getcateList()
					getShopList()
				})
			})
			.catch(() => {
			})

	}
	function removeGift(row : any) {
		// productApi.goodsGift_delete({ id: row.id }).then(() => {
		// 	ElMessage({
		// 		type: 'success',
		// 		message: '操作成功',
		// 	})
		// 	setTimeout(() => {
		// 		getGiftList(shopForm.value.id)
		// 	}, 100)
		// })
	}

	// 每页数量切换
	function pagChange(e : any) {
		if (e) {
			if (e.size) {
				paging.value.limit = e.size
			}
			else if (e.page) {
				paging.value.page = e.page
			}
		}
		getShopList()
	}

	function submitFormText() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {

				// productApi.goodsGift_edit({ ...giftForm.value, goods_id: shopForm.value.id }).then((res : any) => {
				// 	if (res.code === 0) {
				// 		ElMessage({ message: res.msg, type: 'success' })
				// 		addopenGift.value = false
				// 		getGiftList(shopForm.value.id)
				// 	}
				// })
			}
		})
	}

	function changeleft(i : any, it : any, j : any, jt : any) {
		activeleft.value = [j, jt]
		changeleftindex.value = j
		righttitle.value = it.name
		rightnum.value = it.num
		paging.value.name = null
		paging.value.goods_group_id = it.id
		itemleftdata.value = it
		getShopList()
	}
	function addGifts(row : any) {
		shopForm.value = JSON.parse(JSON.stringify(row))
		getAllGiftList()
		getGiftList(row.id)
		openGift.value = true
	}

	function updateurl() {
		formText.value.image = ''
	}
	function topTabFn(e : any) {
		toptabactive.value = e.id
		if (e.id === 1) {
			// leftData.value = leftData0.value
			paging.value = {
				page: 1,
				limit: 10,
			}
		}

		rightnum.value = leftData.value[0].children[0].num
		righttitle.value = leftData.value[0].children[0].name
		activeleft.value = [0, 0]
	}
	function handleSuccess(row : any) {
		console.log(row, 'rrowrowrowowrrowrowrowow')
		formText.value.image = JSON.parse(JSON.stringify(row))
	}
	function modifyGift(row : any) {
		if (row && row.id) {
			giftForm.value = JSON.parse(JSON.stringify(row))
		} else {
			giftForm.value = {}
		}
		addopenGift.value = true
	}
	function changedata(e : any) {

	}
	function handleClick(tab : TabsPaneContext, event : Event) {
		console.log(tab, event)
		activeName.value = tab.paneName

		// if (activeName.value === 'first') {
		// 	paging.value.status = '1,2,3'
		// } else {
		// 	paging.value.status = '4'
		// }
		ischangestatus.value = false
		getShopList()
	}
</script>

<template>
	<div>
		<div class="w-full flex items-center justify-between bg-[#fff]">
			<!-- <div class="w-full flex bg-[#fff] pl-4 pt-3.5">
        <div v-for="(i, j) in topTabsData" :key="j" class="ml-6 flex cursor-pointer font-size-4.5" :class="toptabactive === i.id ? 'fontW-600 c-[#18a058]' : ' c-[#8F9294]'" @click="topTabFn(i)">
          <div class="flex" style="flex-direction: column;">
            <div class="flex items-center">
              {{ i.name }}（{{ i.count }}）
            </div>
            <div style="width: 60px; height: 2px;" class="mt-2" :class="toptabactive === i.id ? 'bg-[#18a058]' : ''" />
          </div>
        </div>
      </div> -->
			<!-- <div class="mr-4 flex cursor-pointer items-center justify-center bg-[#18A058] c-[#fff]" style="width: 78px; height: 36px;border-radius: 4px;" @click="addformType">
        <svg-icon name="ep:plus" class="mr-2" />新增
      </div> -->
		</div>
		<!-- <PageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          成员
        </div>
      </template>
    </PageHeader> -->
		<page-main style="position: relative;">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="已上架" name="first"></el-tab-pane>
				<el-tab-pane label="已下架" name="second"></el-tab-pane>
			</el-tabs>
			<div class="w-full flex">

				<div class="bor-r min-w-45 p2" style="width: 10%;height: 75vh; overflow-y: auto;">
					<div class="" style="margin-top: -17px;">
						<!-- <div class="bor-b333 pb3">
              <div class="min-w-40 flex cursor-pointer justify-between p3" style="border-radius: 4px;" :style="{ backgroundColor: (activeleft[0] === -1 && activeleft[1] === -1) ? '#edf6ff' : '', color: (activeleft[0] === -1 && activeleft[1] === -1) ? '#409eff' : '' }" @click="changeAll()">
                全部
              </div>
            </div> -->
						<div v-for="(i, j) in leftData" :key="j" :class="j === 0 || j === 1 ? 'pb5' : ''">
							<div class="flex justify-between">
								<div class="f18 pb5 pt5" style="font-weight: 600;">
									{{ i.name }}
									<!-- <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="i.name"
                    placement="right-start"
                  >
                    <svg-icon name="ep:question-filled" />
                  </el-tooltip> -->
								</div>
								<!-- <el-button v-if="toptabactive === 1 || toptabactive === 2" class="mt4" @click="manages(j)">
                  管理
                </el-button> -->
							</div>
							<div v-for="(it, jt) in i.children" :key="jt" style="border-radius: 4px;"
								:style="{ backgroundColor: (activeleft[0] === j && activeleft[1] === jt) ? '#edf6ff' : '', color: (activeleft[0] === j && activeleft[1] === jt) ? '#409eff' : '' }"
								class="min-w-40 flex cursor-pointer justify-between p2"
								@click="changeleft(i, it, j, jt)">
								<div>{{ it.name }}</div>
								<!-- <div style="color: #999;"
									:style="{ color: (activeleft[0] === j && activeleft[1] === jt) ? '#409eff' : '#999' }">
									{{ it.num || 0 }}
								</div> -->
							</div>
						</div>
					</div>
				</div>

				<div class="px-5" style="position: relative;width: 87%;">
					<Loading ref="loadingRef" />
					<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<el-tab-pane label="全部" name="first"></el-tab-pane>
						<el-tab-pane label="在售" name="second"></el-tab-pane>
						<el-tab-pane label="预售" name="second"></el-tab-pane>
						<el-tab-pane label="待售" name="second"></el-tab-pane>
					</el-tabs> -->
					<div class="d-c flex">
						<!-- <div>
              <div class="flex items-center">
                <h3>{{ righttitle }}（{{ rightnum }}）</h3>
              </div>
            </div> -->

						<el-form :inline="true" class="demo-form-inline">
							<el-form-item label="">
								<div class="f18" style="font-weight: 600;">
									{{ righttitle }}
									<!-- （{{ rightnum || 0 }}） -->
								</div>
							</el-form-item>
							<el-form-item label="产品名称">
								<el-input v-model="paging.name" placeholder="请输入产品名称" clearable
									@clear="paging.name = null" />
							</el-form-item>
							<el-form-item label="订单状态" v-if="activeName === 'first'">
								<el-select v-model="paging.statuser" class="w-50" clearable placeholder="请选择订单状态"
									@clear="paging.statuser = null">
									<el-option label="全部" value="0" />
									<el-option label="在售" value="1" />
									<el-option label="待售" value="2" />
									<el-option label="预售" value="3" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="getShopList()">
									<template #icon>
										<svg-icon name="ep:search" />
									</template>
									查询
								</el-button>
								<!-- <el-button
                  @click="paging = {
                    page: 1,
                    limit: 10,
                    name: null,
                  }, getList()"
                >
                  重置
                </el-button> -->
							</el-form-item>
						</el-form>
						<div class="btnbox" v-if="userStore.permissions.includes('shopmanargeadd')">
							<el-button type="primary" size="default" @click="modifyText">
								<template #icon>
									<svg-icon name="ep:plus" />
								</template>
								添加
							</el-button>
						</div>
					</div>
					<el-table :data="goodlists" highlight-current-row border height="calc(100vh - 300px)">
						<el-table-column prop="id" label="ID" width="60" align="center" />

						<el-table-column prop="name" label="产品名称" min-width="200">
							<template #default="{ row }">
								<div class="flex d-c ">
									<div>
										<!-- <image-preview :src="row.image" :width="130" :height="80" /> -->
										<div class="f-16 mr-2 c-[#141414] fw-800 flex items-center"
											style="font-size: 18px;">
											{{ row.name }}
										</div>
									</div>
									<div class=" flex">
										<div class="f14 d-c mt-1 flex">
											<image-preview :src="row.image" :width="90" :height="60" />
										</div>
										<div class="ml-2  d-c flex ">
											<div class="mr-4 mt-2  flex flex-wrap">
												销量：{{row.sales_volume || 0}}
											</div>
											<div class="mr-4 mt-2 flex flex-wrap">
												期数：{{row.product_schedule_num || 0}}
											</div>
										</div>
									</div>
									<div class=" mt-2 flex">
										<div class=" flex  items-center">
											<div :class="row.is_top===1?'bg-[red]':'bg-[#409eff]'"
												class=" px-1 c-[#fff]">
												{{row.is_top===1?'热门':'普通'}}
											</div>
											<div class="w-0.5 h-6 mx-2 bg-[#000]">

											</div>
											<div class="c-[#333] bg-[transparent] px-1 cursor-pointer hoverbgs"
												@click="changeIstop(row)">
												{{row.is_top===1?'普通':'热门'}}
											</div>
										</div>
									</div>
								</div>
							</template>
						</el-table-column>

						<el-table-column prop="price" label="价格" width="100" align="center">
							<template #default="{ row }">
								<div>
									<div class="c-[red] font-size-4 font-wight-700">
										{{ row.price /100 }}
									</div>
									<div class="c-[#666] mt-2 font-size-4" style="text-decoration: line-through;">
										{{ row.scribing_price /100 }}
									</div>
								</div>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="scribing_price" label="产品分类" width="120" align="center">
							<template #default="{ row }">
								{{ row.product_info?row.product_info.name:'' }}
							</template>
						</el-table-column> -->
						<el-table-column prop="Integrate_switch" label="营销组件" width="160" align="center">
							<template #default="{ row }">
								<div class='w-full'>
									<div class="flex w-full items-center">
										<div class="w-32 mr-2" style="text-align: end;">赠积分</div>
										<div class="w-28 " style="text-align: start;"><el-tag
												:type="row.Integrate_switch===1?'success':'warning'">{{ row.Integrate_switch===1?'开启':'未开启' }}</el-tag>
										</div>
									</div>
									<div class="flex mt-2 w-full items-center">
										<div class="w-32 mr-2" style="text-align: end;">赠优惠券</div>
										<div class="w-28 " style="text-align: start;"><el-tag
												:type="row.coupon_switch===1?'success':'warning'">{{ row.coupon_switch===1?'开启':'未开启' }}</el-tag>
										</div>
									</div>
									<div class="flex mt-2 w-full  items-center">
										<div class="w-32 mr-2" style="text-align: end;">约伴</div>
										<div class="w-28 " style="text-align: start;"><el-tag
												:type="row.group_switch===1?'success':'warning'">{{ row.group_switch===1?'开启':'未开启' }}</el-tag>
										</div>
									</div>
								</div>
							</template>
						</el-table-column>

						<!-- <el-table-column prop="is_top" label="是否热门" width="120" align="center">
							<template #default="{ row }">
								<el-tag type="warning" v-if="row.is_top===1">是</el-tag>
								<el-tag type="success" v-else>否</el-tag>
							</template>
						</el-table-column> -->
						<!-- <el-table-column prop="status" label="状态" width="100" align="center"
							v-if="activeName === 'first'">
							<template #default="scope">
								<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
									@change="updataDataActwo(scope.row)" />
							</template>
						</el-table-column> -->
						<el-table-column prop="sort" label="排序" width="100" align="center">
							<template #default="{ row }">
								{{ row.sort }}
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="上架时间" width="180" align="center"
							v-if="activeName === 'first'">
							<template #default="{ row }">
								{{row.end_putaway_time>0? dayjs(row.end_putaway_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'' }}
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="下架时间" width="180" align="center"
							v-if="activeName === 'second'">
							<template #default="{ row }">
								{{row.end_recycle_time>0? dayjs(row.end_recycle_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'' }}
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态" width="120" align="center"
							v-if="activeName === 'first'">
							<template #default="{ row }">
								<div v-if="row.status === 1" class="relative flex items-center justify-center">
									<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
										<span
											class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
									</div>
									在售
								</div>
								<div v-if="row.status === 2" class="relative flex items-center justify-center">
									<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
										<span
											class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
									</div>
									待售
								</div>
								<div v-if="row.status === 3" class="relative flex items-center justify-center">
									<div data-v-7edfc4d9="" class="badge yushou relative mr-2 inline-flex">
										<span
											class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
									</div>
									预售
								</div>
							</template>
						</el-table-column>

						<!-- <el-table-column prop="create_time" label="添加时间" width="180" align="center">
							<template #default="{ row }">
								{{ dayjs(row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
							</template>
						</el-table-column> -->

						<el-table-column fixed="right" label="操作" width="160" align="center">
							<template #default="scope">
								<div class="flex justify-center items-center">
									<el-button type="primary" text @click="modifyText(scope.row,1)"
										v-if="userStore.permissions.includes('shopmanargeedit')">
										<template #icon>
											<svg-icon name="ep:edit" />
										</template>修改
									</el-button>
									<!-- <el-button text :type="scope.row.status === 1 ? 'warning' : 'success'"
										@click="updataDataActwo(scope.row)">
										<template #icon>
											<svg-icon :name=" scope.row.status === 1 ? 'ep:close' : 'ep:open'" />
										</template>{{ scope.row.status === 1 ? '下架' : '上架' }}
									</el-button> -->
									<el-button text type="success" @click="modifyText(scope.row,2)"
										v-if="activeName === 'first'">
										<template #icon>
											<svg-icon name="ep:edit" />
										</template>营期
										<!-- ({{scope.row.product_schedule_num}}) -->
									</el-button>

									<el-popconfirm title="确认上架当前产品？" @confirm="changeStatus(scope.row,1)"
										v-if="userStore.permissions.includes('shopmanargestatus')">
										<template #reference>
											<el-button text type="success" v-if="activeName === 'second'">
												<template #icon>
													<svg-icon name="ep:edit" />
												</template>上架
											</el-button>
										</template>
									</el-popconfirm>

								</div>
								<div class="flex justify-center items-center">
									<el-popconfirm title="确认下架当前产品？" @confirm="changeStatus(scope.row,4)"
										v-if="userStore.permissions.includes('shopmanargestatus')">
										<template #reference>
											<el-button text type="warning" v-if="activeName === 'first'">
												<template #icon>
													<svg-icon name="ep:close" />
												</template>下架
											</el-button>
										</template>
									</el-popconfirm>
									<el-popconfirm title="确定删除吗？" @confirm="removeBatch(scope.row)"
										v-if="userStore.permissions.includes('shopmanargedelete')">
										<template #reference>
											<el-button
												:type="(scope.row.status === 1 ||scope.row.status === 2||scope.row.status === 3) ? 'info' : 'danger'"
												text
												:disabled="scope.row.status === 1 ||scope.row.status === 2||scope.row.status === 3">
												<template #icon>
													<svg-icon name="ep:delete" />
												</template>删除
											</el-button>
										</template>
									</el-popconfirm>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
						@pag-change="pagChange" />
				</div>
			</div>
		</page-main>
		<div class="guestBox">
			<el-dialog v-model="addopenGift" width="450px" :close-on-click-modal="false" title="赠品">
				<div class="p-5">
					<el-form ref="formRef" :model="giftForm" :rules="formRules" label-position="top"
						label-width="100px">
						<el-form-item label="添加赠品：" prop="gift_id">
							<el-select v-model="giftForm.gift_id" placeholder="请选择赠品" style="width: 100%;">
								<el-option v-for="item in allgiftList" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>
						<el-form-item label="赠品数量：" prop="num">
							<el-input-number v-model="giftForm.num" style="width: 100%;" placeholder="请输入数量" :min="0"
								:max="999999999" controls-position="right" />
						</el-form-item>
						<el-form-item label="备注：" prop="note">
							<el-input v-model="giftForm.note" style="width: 100%;" placeholder="请输入备注" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<div class="fotterbtn pr-6 pb-6">
						<el-button class="cancel" @click="addopenGift = false">
							取消
						</el-button>
						<el-button type="primary" @click="submitFormText">
							保存
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
		<div class="guestBox">
			<el-dialog v-model="openGift" width="800px" :close-on-click-modal="false" title="赠品列表">
				<div class="p-5">
					<div class="flex justify-end w-full mb-4">
						<el-button type="primary" @click="modifyGift(null)">
							新增
						</el-button>
					</div>
					<el-table :data="giftList" highlight-current-row border height="300">
						<el-table-column prop="id" label="ID" width="60" align="center" />

						<el-table-column prop="gift_info.name" label="赠品名称" />

						<el-table-column prop="price" label="赠品价格" width="100" align="center">
							<template #default="{ row: i }">
								<span>{{ i.gift_info.price/100 }}</span>元
							</template>
						</el-table-column>
						<el-table-column prop="num" label="赠品数量" width="100" align="center">
							<template #default="{ row: i }">
								<span>{{ i.num }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="note" label="备注" width="220" align="center">
							<template #default="{ row: i }">
								<span>{{ i.note }}</span>
							</template>
						</el-table-column>

						<el-table-column fixed="right" label="操作" width="160" align="center">
							<template #default="scope">
								<el-button type="primary" text @click="modifyGift(scope.row)">
									<template #icon>
										<svg-icon name="ep:edit" />
									</template>修改
								</el-button>
								<el-popconfirm title="确定删除吗？" @confirm="removeGift(scope.row)">
									<template #reference>
										<el-button type="danger" text>
											<template #icon>
												<svg-icon name="ep:delete" />
											</template>删除
										</el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-dialog>
		</div>

		<!-- <HDialog v-model="openGift" title="赠品" modulewidth="880px">
	  <div class="p-5">
	    <el-form ref="formRef" :model="giftForm" :rules="formRules" label-position="top" label-width="100px">
	      <el-row :gutter="24">
	        <el-col :xs="18" :sm="24" :md="18" :lg="18">
	         <el-form-item label="添加赠品：" prop="stores">
	           <el-select
	             v-model="giftForm.stores"
	             multiple
	             size="large"
	             placeholder="请选择关联门店"
	             style="width: 100%;"
	           >
	             <el-option
	               v-for="item in storesList"
	               :key="item.id"
	               :label="item.name"
	               :value="item.id"
	             />
	           </el-select>
	         </el-form-item>
	        </el-col>
	        <el-col :xs="24" :sm="24" :md="12" :lg="12">
	          <el-form-item label="分销价格">
	            <el-input-number
	              v-model="formProduct.cost_price" style="width: 100%;" size="large" placeholder="请输入分销价格" :min="0" :max="999999999" controls-position="right"
	              :precision="2"
	            />
	          </el-form-item>
	        </el-col>
	      </el-row>
	    </el-form>
	  </div>
	  <template #footer>
	    <div class="fotterbtn">
	      <el-button class="cancel" @click="showEdit = false">
	        取消
	      </el-button>
	      <el-button type="primary" @click="submitFormText">
	        保存
	      </el-button>
	    </div>
	  </template>
	</HDialog> -->
		<GetSchedule v-if="showSchedule" v-model="showSchedule" :infoform="infoform" @changedata="changedata($event)" />
	</div>
</template>

<style lang="scss" scoped>
	:deep(.main-container) {
		padding: 0 15px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}

	.yushou {
		.before\:bg-ui-primary::before {
			background-color: #36e629;
		}

		.bg-ui-primary {
			background-color: #36e629;
		}
	}

	.text-container {
		width: 95px;

		/* 容器宽度 */
		overflow: hidden;

		/* 超出部分隐藏 */
		text-overflow: ellipsis;

		/* 超出部分显示省略号 */
		white-space: nowrap;

		/* 不换行 */
	}

	.text-container1 {
		width: 81px;

		/* 容器宽度 */
		overflow: hidden;

		/* 超出部分隐藏 */
		text-overflow: ellipsis;

		/* 超出部分显示省略号 */
		white-space: nowrap;

		/* 不换行 */
	}

	.example-showcase .el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.example-showcase .el-dropdown-link {
		display: flex;
		align-items: center;
		color: var(--el-color-primary);
		cursor: pointer;
	}

	:deep(.right-side) {
		display: flex;
		flex-direction: column;

		.el-table {
			height: 100%;
			margin-top: 15px;

			.el-table__row {
				&.ghost {
					opacity: 0;
				}

				.index {
					display: inline-block;
				}

				.delete {
					display: none;
				}

				&:hover {
					.index {
						display: none;
					}

					.delete {
						display: inline-block;
					}
				}

				.el-tag.sortable,
				.el-tag.sortable .icon {
					cursor: ns-resize;
				}
			}
		}
	}

	.hdialogwidth {
		padding: 120px;
	}

	.hasbg {
		background-color: #409eff;
	}

	.fotterbtn {

		// padding: 8px 32px;padding
		.cancel {
			color: #409eff;
			border: 1px solid #409eff;
		}
	}

	.editbtns {
		color: #fff;
	}

	.editbtns:hover {
		color: #fff;
		background-color: #409eff;
	}

	.custom-tooltip {
		padding: 8px;
		border-radius: 4px;
		transition: background-color 0.3s, color 0.3s;
	}

	.btnbox {
		position: absolute;
		top: 0px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.el-table {
		:deep(.is-text) {
			padding: 8px 0;
		}
	}

	:deep(.el-button__text--expand) {
		margin-right: 0;
		letter-spacing: 0;
	}

	:deep(.el-checkbox__label) {
		font-size: 16px;
	}

	:deep(.el-checkbox) {
		width: 120px;
		margin-right: 0;
	}

	.hoverbgs:hover {
		background-color: #ccc;
		padding: 0 4px;
	}

	.border-2-999 {
		border: 1px solid #e9e8e8;
	}

	.bg-ccc {
		background: #f5f5f5;
	}

	.fontW-500 {
		font-weight: 500;
	}

	.fontW-600 {
		font-weight: 600;
	}

	.d-c {
		flex-direction: column;
	}

	.bor-r {
		border-right: 1px solid #e9e8e8;
	}

	.bor-t {
		border-top: 1px solid #e9e8e8;
	}

	.bor-l {
		border-left: 1px solid #e9e8e8;
	}

	.bor-b {
		border-bottom: 1px solid #e9e8e8;
	}

	.bor-b333 {
		border-bottom: 1px solid #e9e8e8;
	}


	:deep(.guestBox .el-overlay-dialog) {
		background-color: rgb(255 255 255 / 80%);
	}

	:deep(.guestBox .el-dialog) {
		padding: 12px 0 0;
		border-radius: 10px;
	}

	:deep(.guestBox header) {
		padding-left: 16px;
		font-size: 16px;
		font-weight: 550;
		border-bottom: 1px solid #f2f2f2;
	}

	:deep(.guestBox .el-dialog__headerbtn .el-dialog__close) {
		font-size: 20px;
		color: #000;
	}
</style>